<template>
	<view v-if="datalist.length > 0" class="tab_contents" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="hei100 dis disAl disJuB" style="width: 25%;" v-for="(item,tab_index) in datalist" :key="tab_index"
		:style="'color: '+(index == tab_index?back:'#9A999A')+';'" @click="changeme(tab_index)">
			<view class="textCen wid100">
				 <!-- style="overflow: hidden;" -->
				<!-- <view class="image mar poRel">
					<view class="image1 bacFFF poAbs" style="left: -51rpx;z-index: 10;top: -8rpx;"></view>
					<image :src="item.icon" class="wh100" :style="'filter: drop-shadow(50rpx 0 '+
						(index == tab_index?back:'#9A999A')+');transform: translateZ(0px);margin-left: -200%;'"></image>
				</view> -->
				<view class="dis disAl disJuC wid100" style="height: 50rpx;">
					<uni-icons v-if="tab_index == 0" custom-prefix="iconfont" 
						type="icon-a-zhuyeshouye" size="40rpx" :color="index == tab_index?back:'#9A999A'"></uni-icons>
					<uni-icons v-if="tab_index == 1" custom-prefix="iconfont"
						type="icon-mendian" size="40rpx" :color="index == tab_index?back:'#9A999A'"></uni-icons>
					<uni-icons v-if="tab_index == 2" custom-prefix="iconfont"
						type="icon-tech" size="40rpx" :color="index == tab_index?back:'#9A999A'"></uni-icons>
					<uni-icons v-if="tab_index == 3" custom-prefix="iconfont"
						type="icon-ziyuan100" size="40rpx" :color="index == tab_index?back:'#9A999A'"></uni-icons>
					<uni-icons v-if="tab_index == 4" custom-prefix="iconfont"
						type="icon-wode" size="40rpx" :color="index == tab_index?back:'#9A999A'"></uni-icons>
				</view>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aurl: this.global.url,
				paddingBottomHeight: 0
			}
		},
		props: {
			back: {
				default: '',
				type: String
			},
			backTwo: {
				default: '',
				type: String
			},
			datalist: {
				default: Array,
				type: Array
			},
			index: {
				default: 0,
				type: Number
			},
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					// console.log('什么机型');
					// console.log(res);
					// let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					// model.forEach(item => {
					// 	//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
					// 	if(res.model.indexOf(item) != -1 && res.deviceModel.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = res.safeAreaInsets.bottom;
					// 	}
					// })
				}
			});
		},
		methods: {
			changeme(tab_index){
				if(tab_index != this.index){
					var url = ''
					switch(tab_index){
						case 0:
						 url = '/pages/index/index'
						 break ;
					    case 1:
					     url = '/pages/shop/shop'
					     break ;
					    case 2:
					     url = '/pages/technician/technician'
					     break ;
					    case 3:
					     url = '/pages/dynamically/dynamically'
					     break ;
					    case 4:
					     url = '/pages/wode/wode'
					     break ;
					}
					console.log(url)
					uni.switchTab({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.tab_contents{
	font-size: 25rpx;
	border-top: 1rpx solid #f1f1f1;
	padding: 10rpx 0;
	position: fixed;
	bottom: 0;
	z-index: 99999;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	height: 100rpx;
	.image{
		width: 50rpx;
		height: 50rpx;
	}
	.image1{
		width: 51rpx;
		height: 60rpx;
	}
}
</style>
